<template>
  <!-- 排放日历 -->
  <view class="conter">
    <cc-time title='排放日历' text='选择时间' color='#fff'></cc-time>
    <view class="navigation_head"></view>
    <view class="head">
      <!-- <navigator class="head_a" url="../calendar_a/calendar_a"> -->
        <view class="head_a"> 
        <view class="head_word">
         <ms-dropdown-menu >
            <ms-dropdown-item @input="mileage" v-model="value" :list="All_enterpriseList"></ms-dropdown-item>
          </ms-dropdown-menu>
        <!-- <image src="../../static/organization_ranking/xl.png" mode=""></image> -->
      </view> 
      </view>
      <!-- </navigator> -->
      <view class="head_b">
        <view class="head_bb" :class="{head_ba:falg==0}" @click="cheang">
          厂界
        </view>
        <view class="head_bb" :class="{head_ba:falg==1}" @click="cheang_a">
          排口
        </view>
      </view>
    </view>
   
    <view class="calendar">
     <!-- <view class="calendar_a">
        <view class="calendar_aa" v-for="(item,i) in week" :key='i' >
          {{item.num}}
        </view>
      </view>
      <view class="calendar_c">
        <view class="calendar_ab" v-for="item in 35">
          1
        </view>
       
      </view> -->
      <!-- 日历 -->
        <view class="calendar_day">
            <uni-calendar 
            :insert="true"
            :lunar="true" 
            @change="change"
             />
        </view>
      <!-- 表格 -->
       <view class="table_a">
      <uni-table border stripe emptyText="暂无更多数据" class="box">
        <!-- 表头行 -->
        <uni-tr>
          <uni-th width="25%" align="center">名称</uni-th>
          <uni-th width="25%" align="center">日均浓度</uni-th>
          <uni-th width="25%" align="center">超标倍数</uni-th>
          <uni-th width="25%" align="center">操作</uni-th>
        </uni-tr>
        <!-- 表格数据行 -->
        <uni-tr v-for="item in 4">
          <uni-td align="center">永利</uni-td>
          <uni-td align="center" style="color: #FF7F6C;">23mg/m³</uni-td>
          <uni-td align="center">1.2</uni-td>
          <uni-td align="center" style="color: #4EA1FF;">查看</uni-td>
        </uni-tr>
      </uni-table>
      </view>
      <view class="box_word">
        *当前超标倍数的统计方式为方式一
      </view>
    </view>
    <!-- 图表 -->
    <uni-card class="unicard">
      <view class="chart">
        <view class="change_head">
          24小时空气质量变化趋势
        </view>
        <view class="change_a">
          <view class="change_aa">
          </view>
          徽州区
        </view>
        <view class="region">
          <echarts :option="option" style="height: 300px;" @click="echartsClick"></echarts>
        </view>
      </view>
    </uni-card>
  </view>
</template>

<script>
  import echarts from '@/components/echarts/echarts.vue';
  import msDropdownMenu from '@/components/ms-dropdown/dropdown-menu.vue'
  import msDropdownItem from '@/components/ms-dropdown/dropdown-item.vue'
  export default {
    components: {
      msDropdownMenu,
      msDropdownItem,
    },
    data() {
      return {
        // info: {
        // 	lunar: true,
        // 	range: true,
        // 	insert: false,
        // 	selected: []
        // },
        // week:[
        //   {num:'一'}, {num:'二'}, {num:'三'}, {num:'四'}, {num:'五'}, {num:'六'}, {num:'七'}
        //   ],
        All_enterpriseList:[],
        enterprise_id:'',
        enterprise_date:'',
        value: 0,
        text:'',
        falg: 0,
        option: {
          xAxis: {
            type: 'category',
            data: ['6:00', '8:00', '10:00', '12:00', '14:00', '16:00']
          },
          yAxis: {
            type: 'value'
          },
          series: [{
            data: [760, 350, 200, 100, 198, 420],
            type: 'line',
            smooth: true,
            itemStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0,
                  color: '#5B8FF9' // 0% 处的颜色
                }, {
                  offset: 1,
                  color: '#FFFFFF' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              }
            },
            lineStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 1,
                y2: 1,
                colorStops: [{
                  offset: 0,
                  color: '#5B8FF9' // 0% 处的颜色
                }, {
                  offset: 0.5,
                  color: '#5B8FF9' // 0% 处的颜色
                }, {
                  offset: 1,
                  color: '#5B8FF9' // 100% 处的颜色
                }],
                global: false // 缺省为 false
              }
            },
            areaStyle: {}
          }]
        },
      };
    },
    onLoad() {
      this.getAll_enterprise()
    },
    methods: {
      
      // monthSwitch(e) {
      // 	console.log('monthSwitchs 返回:', e)
      // },
      // 查询企业的总数和企业检测详情
      getAll_enterprise(){
      	this.$http.get('/device/group/customerId',{}).then(res=>{
          // console.log('123445')
          // console.log('企业信息',res)
          if(res.code=='00000'){
            const list = []
            // this.All_enterpriseList = res.data
            res.data.forEach((item,index)=>{
              list.push(
               { 
                text:item.abbreviation,
                id:item.id,
                value:index
                }
              )
            })
            this.All_enterpriseList = list
            // console.log('企业信息',res)
          }
      	})
      },  
      change(e) {
      	// console.log('change 返回:', e)
        console.log('day', e.fulldate)
        this.enterprise_date = e.fulldate
        this.getcalendar()
        this.getcalendar_24()
      	// 模拟动态打卡
      	// if (this.info.selected.length > 5) return
      	// this.info.selected.push({
      	// 	date: e.fulldate,
      	// 	info: '打卡'
      	// })
      },
      mileage(e) {
        this.enterprise_id = e.id
        console.log('enterprise_id',this.enterprise_id);
        this.getcalendar()
        this.getcalendar_24()
      },
      // tvoc排放日历-显示日历的超标个数和浓度
      getcalendar(){
      	this.$http.get('/envirnment-air/app/analysis/tvocCalendar',{
          date:this.enterprise_date,
          enterpriseId:this.enterprise_id,
          type:this.falg
        }).then(res=>{
           console.log('日历',res)
          if(res.code=='00000'){
            console.log('日历',res)
          }
      	})
      }, 
      // tvoc排放日历-24小时排放趋势
      getcalendar_24(){
      	this.$http.get('/envirnment-air/app/analysis/dischargeTrend24',{
          date:this.enterprise_date,
          enterpriseId:this.enterprise_id,
          type:this.falg
        }).then(res=>{
           console.log('日历_24',res)
          if(res.code=='00000'){
            console.log('日历_24',res)
          }
      	})
      }, 
      
      /**
       * 点击事件
       * @param {Object} params
       */
      echartsClick(params) {
        console.log('点击数据', params)
      },
      cheang() {
        this.falg = 0
      },
      cheang_a() {
        this.falg = 1
      },
    }
  }
</script>

<style lang="scss">
  .navigation_head {
    height: calc(88rpx + var(--status-bar-height));
  }

  .qiun-charts {
    width: 650upx;
    height: 500upx;
    background-color: #FFFFFF;
  }

  .charts {
    width: 650upx;
    height: 500upx;
    background-color: #FFFFFF;
  }

  .conter {
    // height: 1808rpx;
    background-color: #F7F7F7;
    overflow: hidden;
  }

  .head {
    display: flex;
    justify-content: space-between;
  }

  .head_a {
    overflow: hidden;
    display: flex;
    align-items: center;
    width: 290rpx;
    height: 66rpx;
    background: #FFFFFF;
    border-radius: 8rpx;
    border: 1rpx solid #EAEAEA;
    margin: 20rpx 0 0 24rpx;
  }

  .head_word {
    width: 100%;
    font-size: 24rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #333333;
  }

  .head_ba {
    // width: 191rpx;
    // height: 66rpx;
    // line-height: 66rpx;
    // font-size: 24rpx;
    // text-align: center;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #FFFFFF;
    background: #4EA1FF;
    border-radius: 8rpx;
  }

  .head_bb {
    width: 191rpx;
    height: 66rpx;
    line-height: 66rpx;
    font-size: 24rpx;
    text-align: center;
    // background: #fff;
  }

  .head_b {
    display: flex;
    align-items: center;
    width: 382rpx;
    height: 66rpx;
    background-color: #fff;
    margin: 20rpx 28rpx 0 0;
    font-size: 28rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #333333;
    text-align: center;
  }
 .calendar_day{
   overflow: hidden;
   width: 702rpx;
   // height: 1120rpx;
   background: #FFFFFF;
   border-radius: 8rpx;
   margin: 20rpx auto 0;
 }
  .calendar {
    width: 702rpx;
    // height: 1120rpx;
    background: #FFFFFF;
    border-radius: 8rpx;
    margin: 20rpx auto 0;
    padding-bottom: 20rpx;
  }

  .calendar_a {
    display: flex;
    // justify-content: space-around;
    margin-top: 20rpx;
    padding: 0 13rpx;
  }
  .calendar_c {
    display: flex;
    // justify-content: space-around;
    flex-wrap: wrap;
    margin-top: 20rpx;
    padding: 0 13rpx;
  }

  .calendar_aa {
    width: 80rpx;
    height: 80rpx;
    margin: 0 8rpx;
    font-size: 28rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #666666;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .calendar_ab {
    width: 80rpx;
    height: 80rpx;
    margin: 10rpx 8rpx;
    background-color: #FF5000;
    font-size: 36rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    border-radius: 4px;
    opacity: 0.4;
    color: #FFFFFF;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .box {
    margin-top: 51rpx;
  }

  .box_word {
    margin: 26rpx 0 0 20rpx;
    font-size: 26rpx;
    font-family: PingFang-SC-Medium, PingFang-SC;
    font-weight: 500;
    color: #999999;
  }

  // .chart{
  //   width: 702rpx;
  //   height: 550rpx;
  //   background-color: #fff;
  //   margin: 20rpx auto 0;
  // }
  .change_head {
    font-size: 28rpx;
    font-family: PingFangSC-Medium, PingFang SC;
    font-weight: 500;
    color: #333333;
  }

  .change_a {
    display: flex;
    align-items: center;
    margin: 34rpx 0 0 30rpx;
    font-size: 22rpx;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #8C8C8C;
  }

  .change_aa {
    width: 15rpx;
    height: 15rpx;
    margin-right: 16rpx;
    background-color: #5B8FF9;
    border-radius: 50%;
  }

  .region {
    transform: translateY(-10%);
  }
  .table_a{
    padding: 0 20rpx;
  }
  .unicard{
    width: 702rpx !important;
    margin: 20rpx auto !important;
  }
</style>
